<template>
    <div>
        <div id="mainL2" style="width: 100%;height:18.75rem;position: absolute;left: 0;right: 0;top: 0.625rem;margin: auto;">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { RequestStatisticGetPieChartData } from "@/api/path/index.js";

// 基于准备好的dom，初始化echarts实例
// 绘制图表
onMounted(() => {
    RequestStatisticGetPieChartData().then((res: any) => {
        res.resultObj = JSON.parse(JSON.stringify(res.resultObj).replace(/危固废/g, '其他'))
        var chartDom = document.getElementById('mainL2');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            color: ['#26ffcb', '#24cbff', '#35fbf4', '#266eff'],
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: ['50%', '95%'],
                    roseType: 'area',
                    center: ['50%', '50%'],
                    data: res.resultObj
                }
            ]
        };

        option && myChart.setOption(option);
    })
})
</script>
<style lang="scss" scoped></style>